<template>
  <div class="classify">
    <div class="classify-top">
      <input type="text" placeholder="回车搜索商品" />
    </div>
    <div class="list-content">
      <div class="list_left">
        <NavLeft
          class="left_nvs"
          v-for="(item,index) in onelist"
          :key="index"
          :item="item"
          :index="index"
          :selectIndex="selectIndex"
          @change="change(index,item)"
        />
      </div>
      <div class="list_right">
        <div class="right">
          <div class="right-t">
            <NavRight
              v-for="(item,index) in twolist"
              :key="index"
              :item="item"
              @goClass="goDetail(item,index)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavLeft from "./classifyItem/Nav_left";
import NavRight from "./classifyItem/Nav_right";
export default {
  data() {
    return {
      onelist:[],
      twolist:[],
      allData:[],
      selectIndex:0
    };
  },
  components: {
    NavLeft,
    NavRight,
  },
  mounted(){
    this.$CLIENT.getClassify().then(res=>{
      this.onelist.push({name:"全部展示"});
      this.allData = res.data.data
      res.data.data.map(el=>{
        if(el.pid === 0){
          this.onelist.push(el)
        };
        if(el.pic !== 0){
          this.twolist.push(el)
        }
      })
    })
  },
  methods: {
    change(index,item){
      this.selectIndex = index;
      this.twolist = []
      if(item.name === "全部展示"){
        this.twolist = this.allData
      }else{
        this.allData.map(el=>{
          if(el.pid === item.id){
            this.twolist.push(el)
          }
        })
      }
    },
    goDetail(item,index){
      this.$router.goNext({path:"/classifyDetail",query:{id:item.id}})
    }
  },
};
</script>

<style scoped>
.classify-top {
  width: 100%;
  height: 64px;
  background: white;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}
.classify-top input {
  width: 220px;
  height: 50%;
  background: #eee;
  text-indent: 1em;
  border: none;
  border-radius: 15px;
  outline: none;
}
.classify-top input::placeholder {
  text-indent: 1em;
}
.list-content {
  width: 100%;
  background: white;
  height: 84vh;
  display: flex;
  justify-content: space-between;
}
.list_left {
  /* overflow: hidden; */
  width: 25%;
  /* height: 4rem; */
  /* background: springgreen; */
  box-sizing: border-box;
  border-right: 1px solid #eee;
}
.list_right {
  width: 75%;
  height: 100%;
}
.right {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: scroll;
}
.right-t {
  display: flex;
  flex-wrap: wrap;
}
</style>